<template>
	<view class="page">
		<view class="item-box" v-for="(item, ind) in items" :key="ind">
			<view class="left">
				<view class="item-left">
					<view :class="item.icon" style="font-size: 32px; color: gray;"></view>
				</view>
				<view class="item-center">
					<view class="item-up">
						{{item.title}}
					</view>
					<view class="item-down">
						{{item.desc}}
					</view>
				</view>
			</view>
			<view class="right">
			<view v-if="item.num != 0" class="item-right">
				{{item.num}}
			</view>
			<view class="item-point">
				<view class="iconfont icon-arr-right" style="font-size: 50px;color: gray;"></view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						icon: ['iconfont', 'icon-kefu'],
						title: '在线客服',
						desc: '查看与客服的沟通记录',
						num: 0
					},
					{
						icon: ['iconfont', 'icon-libao'],
						title: '活动消息',
						desc: '你的地球日活动福利来了',
						num: 1
					},
					{
						icon: ['iconfont', 'icon--handshake'],
						title: '服务消息',
						desc: '您有一张优惠券到账了',
						num: 2
					},
					{
						icon: ['iconfont', 'icon-laba'],
						title: '系统消息',
						desc: '秒杀专区下线公告',
						num: 3
					}
				],
				size: 32
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url("message.css");
	@import url("../../static/iconfont/iconfont.css");
</style>
